<template>
  <div class="indicatorView">
    <!-- 社康人数 -->
    <div v-for="(item, index) in meunList" :key="index" class="itemView">
      <div
        class="menu-icon-box ry-flex-col ry-center"
        :style="{ background: item.bgColor }"
      >
        <svg-icon
          :icon-class="item.icon"
          :style="{ color: `${item.svgColor} !important`, fontSize: 24 }"
        />
      </div>
      <div>
        <div style="display: flex; align-items: center">
          <div style="font-size: 0.8vw">{{ item.label }}</div>
          <i
            v-if="item.titlap"
            class="el-icon-info"
            style="color: rgb(64, 158, 255); margin-left: 10px"
          />
        </div>
        <div style="font-size: 26px; font-weight: bold">
          {{ nums[item.key] || 0 }}
        </div>
        <div
          v-if="false"
          style="
            display: flex;
            align-items: center;
            font-size: 14px;
            line-height: 14px;
            height: 14px;
          "
        >
          <div>123$</div>
          <div>同比上月</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getNums } from "@/api/drug";
export default {
  data() {
    return {
      nums: {},
      meunList: [
        {
          label: "社康总人数",
          bgColor: "rgb(97, 147, 212)",
          svgColor: "#fff",
          icon: "drug-read",
          key: "sjszrs",
          titlap: "123",
        },
        {
          label: "小程序安装总人数",
          bgColor: "rgb(211, 148, 138)",
          svgColor: "#fff",
          icon: "drug-jiqirenguanli",
          key: "appazzrs",
        },
        {
          label: "本月签到情况",
          bgColor: "rgb(187, 217, 149)",
          svgColor: "#fff",
          icon: "drug-duihao",
          key: "sqdrs",
        },
        {
          label: "尿检情况",
          bgColor: "rgb(242, 234, 108)",
          svgColor: "#fff",
          icon: "drug-fuzhipeizhi",
          key: "snjrs",
        },
        {
          label: "谈话次数",
          bgColor: "rgb(97, 147, 212)",
          svgColor: "#fff",
          icon: "drug-yonghu",
          key: "thcs",
        },
        {
          label: "家访次数",
          bgColor: "rgb(211, 148, 138)",
          svgColor: "#fff",
          icon: "drug-zaijia",
          key: "jfcs",
        },
        {
          label: "就业安置人数",
          bgColor: "rgb(187, 217, 149)",
          svgColor: "#fff",
          icon: "drug-lingdaitie",
          key: "jyazrs",
        },
        {
          label: "帮扶次数",
          bgColor: "rgb(242, 234, 108)",
          svgColor: "#fff",
          icon: "drug-info",
          key: "bfcs",
        },
      ],
    };
  },
  mounted() {
    this.getRequest();
  },
  methods: {
    getRequest() {
      getNums().then((response) => {
        this.nums = response.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.indicatorView {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: flex-start;
}
.itemView {
  display: flex;
  align-items: center;
  box-shadow: 0 0 6px #ccc;
  margin-right: 20px;
  width: calc((100% - 60px) / 4);
  box-sizing: border-box;
  padding: 15px 10px;
  padding-right: 0;
  border-radius: 5px;
  margin-bottom: 20px;
  height: 100px;
}
.itemView:nth-child(4n) {
  margin-right: 0 !important;
}
.menu-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin-right: 15px;
}
</style>
